<template>
	<div>
		<div>
		<div class="play-nav">
			直播
		</div>	
		<div v-for='i in shuju' class="nowplay">
			<div>
				<div class="logo"><img :src="i.team_A_logo"></div>
				<p>{{i.team_A_name}}</p>
			</div>
			<div>
				<p>{{i.time_utc}}&emsp;{{i.competition_name}}<span v-show='i.gameweek!=""'>&emsp;第</span>{{i.gameweek}}<span v-show='i.gameweek!=""'>轮</span></p>
				<p>{{i.TVList}}</p>
				<p v-show="i.as_A!=null" class="big">{{i.as_A}}-{{i.as_B}}</p>
				<p v-show="i.as_A==null" class="big">未开始</p>
			</div>
			<div>
				<div class="logo"><img :src="i.team_B_logo"></div>
				<p>{{i.team_B_name}}</p>
			</div>
		</div>
		</div>
	</div>
</template>
<style scoped>
.play-nav{
	text-align: center;
	font-size: 0.533333rem;
	color: white;
	background: green;
}
.nowplay{
	display: flex;
	padding-bottom: 0.533333rem;
    padding-top: 0.266667rem;
    border-bottom: 1px solid #ddd;
}
.nowplay>div:nth-of-type(2)>p:first-of-type{
	font-size: 0.266667rem;
}
.big{
	font-size: 0.48rem;
	color: green;
}
.nowplay>div{
	width: 33.3%;
	text-align: center;
	display: flex;
	justify-content:center;
	flex-direction:column;
}
.logo{
	width: 0.8rem;
	height: 0.8rem;
	 margin: auto;
}
img{
	width: 100%;
	height: 100%;
}
</style>
<script>
export default{
	data(){
		return {
			shuju:[]
		}
	},
	methods:{
		request(){
			this.$http.get('/zhibo').then(function(res){
				this.shuju=res.body.list;
			})
		}
	},
	computed:{
		
	},
	mounted(){
		this.request();
	}
}
</script>
